<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>迁移槽位</title>
    <script>

        $(function () {

            $(":input").inputmask();

            $.post("${ctx}/redis-api/getClusters", {}, function(data) {
                if (data.success){
                    var clusters = data.result;
                    var clusterList = $('#cluster-list');
                    for (var i = 0; i < clusters.length; i++){
                        clusterList.append('<option value="'+clusters[i].id+'">'+clusters[i].clusterName+'</option>');
                    }
                    clusterList.selectpicker('refresh');
                    clusterList.on('hidden.bs.select', function(){
                        var clusterId = $(this).val();
                        if (clusterId != "") {
                            setMasterNodeDropdownList(clusterId)
                        }
                    });
                }
            });
            $('#fromNode,#toNode').selectpicker({
                //liveSearch: true,
                //maxOptions: 1,
                //title:"请选择集群",
                width:'auto'
            });

            $('#migrate-slots').click(function () {
                var clusterId = $('#cluster-list').selectpicker('val');
                if (clusterId == ""){
                    toastr.warning("请先从下拉框中选择一个集群！");
                    return;
                }
                if (!$("#migrate-slots-form").valid()){
                    toastr.warning("输入参数不完整！");
                    return;
                }
                var fromNode = $('#fromNode').selectpicker('val');
                var toNode = $('#toNode').selectpicker('val');
                if (fromNode == toNode){
                    toastr.warning("源节点和目标节点不能相同！");
                    return;
                }
                var param = {clusterId:clusterId, fromNodeId:fromNode, toNodeId:toNode, slotsNum:$('#slotsNum').val()};
                $.post("${ctx}/redis-api/migrateSlots", param, function(data) {
                    if (data.success) {
                        toastr.success("迁移槽位成功！", "", {timeOut:0});
                    }
                }, "json");

            })


        });

        function setMasterNodeDropdownList(clusterId){
            $.post("${ctx}/redis-api/getClusterAndNodesInfo", {clusterId:clusterId}, function(data) {
                if (data.success){
                    var clusterInfo = data.result;
                    var node = $('#fromNode,#toNode');
                    node.empty();
                    if (clusterInfo.state == 'shutdown'){
                        toastr.warning("集群（"+clusterInfo.clusterName+"）不能访问！");
                        node.selectpicker('refresh');
                        return;
                    }
                    var masterNodes = clusterInfo.masterNodes;
                    for (var i = 0; i < masterNodes.length; i++){
                    //for (var i in masterNodes){
                        var masterNode = masterNodes[i];
                        node.append('<option value="'+masterNode.id+'">'+masterNode.ip+ ":"+masterNode.port+'</option>');
                    }
                    node.selectpicker('refresh');
                }
            });
        }

    </script>
</head>

<body>

<div class="page-title">
    <div class="btn-group pull-right">
        <%--<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">选择集群<span class="caret"></span></button>--%>
        <%--<ul class="dropdown-menu dropdown-menu-right" id="cluster-list">--%>
        <%--</ul>--%>
        <select id="cluster-list" class="selectpicker show-tick" title="请选择集群" data-live-search="true" data-size="5">
        </select>
    </div>
    <h3>迁移槽位</h3>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="widget-container fluid-height">
            <div class="heading">
                <i class="icon-group"></i>迁移槽位
            </div>
            <div class="widget-content padded clearfix">
                <form class="form-horizontal" id="migrate-slots-form">
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="fromNode">源节点</label>
                        <div class="col-md-3">
                            <select id="fromNode" name="fromNode" class="selectpicker show-tick" title="请选择源节点" data-live-search="true" data-size="5" required>
                            </select>
                        </div>
                        <label class="col-md-2 control-label" for="slotsNum">迁移槽位数量</label>
                        <div class="col-md-2">
                            <input class="form-control" id="slotsNum" name="slotNum" type="text" placeholder="" min="1" required="true" data-inputmask="'alias': 'decimal'"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label" for="toNode">目标节点</label>
                        <div class="col-md-3">
                            <select id="toNode" name="toNode" class="selectpicker show-tick" title="请选择目标节点" data-live-search="true" data-size="5" required>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="migrate-slots">开始迁移</button>
        </div>
    </div>
</div>
</body>
</html>
